import { Navigate, useRoutes } from 'react-router-dom'
import Login from '../components/Login'
import Main from '../components/Main'
import NotFound from '../components/404'
import About from '../components/Main/About'
import Home from '../components/Main/Home'


//配置路由文件
const routes = [
    {
        path: "/Login",
        element: <Login />,
    },
    {
        path: "/Main",
        element: <Main />,
        children: [
            {
                path: "/Main/Home",
                element: <Home />
            },
            {
                path: "/Main/About",
                element: <About />
            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/Login" />,
    },
    {
        path: "*",
        element: <NotFound />,
    }
]

export default routes;


//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构

export const GetRoutes = ()=>{
    //再组件中外层 可以使用Hook
    return useRoutes(routes)
}

// //自定义hooks
// export const useMyRoutes = () => {
//     //在自定义hooks中是可以使用hook
//     return useRoutes(routes)
// }